<template>
  <div class="main">
    <div class="body_back"><img src="../assets/login_register_ba.jpg" /></div>
    <div class="login_demo">
      <h2>用 户 注 册</h2>

      <el-form ref="form" :model="user" label-width="80px">
        <el-form-item label="账号：">
          <el-input
            placeholder="请输入账号"
            v-model="user.username"
            class="input_username"
          ></el-input>
        </el-form-item>

        <el-form-item label="密码：">
          <el-input
            placeholder="请输入密码"
            v-model="user.password"
            show-password
            class="input_password"
          ></el-input>
        </el-form-item>

        <el-form-item label="邮箱：">
          <el-input
            placeholder="请输入邮箱"
            v-model="user.email"
            class="input_username"
          ></el-input>
        </el-form-item>

        <el-form-item label="手机号：">
          <el-input
            placeholder="请输入手机号"
            v-model="user.photo"
            class="input_username"
          ></el-input>
        </el-form-item>

        <el-form-item label="验证码：">
          <el-input
            placeholder="请输入手机验证码"
            v-model="user.verificationCode"
            class="input_verification"
          ></el-input>
        </el-form-item>
        <div class="erro_msg" v-text="erro_msg"></div>
        <el-button
          icon="el-icon-s-custom"
          class="login_btn"
          type="success"
          @click="login_btn"
          >去登录</el-button
        >
        <el-button
          @click="register_cli"
          icon="el-icon-s-check"
          class="register_btn"
          type="primary"
          >注册</el-button
        >
        <el-button
          @click="getcode_cli"
          icon="el-icon-phone"
          class="verification_btn"
          type="primary"
          >获取验证码</el-button
        >
      </el-form>
    </div>
  </div>
</template>

<script>
import "../assets/css/sign.css";
import "../assets/css/iconfont.css";
export default {
  name: "login",
  layout: "sign",
  data() {
    return {
      user: {
        username: "",
        password: "",
        email: "",
        photo: "",
        verificationCode: "",
      },
      erro_msg: "",
    };
  },
  components: {},
  methods: {
    login_btn() {
      this.$router.push({ path: "/login" });
    },
    register_cli() {
      let this_ = this;
      this.$http
        .post(`http://localhost:88/api/book/user/save`, this.user)
        .then(function (response) {
          if (response.data.code == 500) {
            this_.erro_msg = response.data.msg;
          }else{
            this_.$message({
          showClose: true,
          message: '注册成功',
          type: 'success'
        });
        this_.$router.push({
                path: '/login'             
              })
          }
        })
        .catch(function (err) {
          console.log(err);
        });
    },
    getcode_cli() {
      this.$http
        .post(`http://localhost:88/api/book/user/get/sms/${this.user.photo}`)
        .then(function (response) {
          console.log(response.data);
        })
        .catch(function (err) {
          console.log(err);
        });
    },
  },
};
</script>
<style>
.erro_msg {
  text-align: center;
  color: red;
  height: 20px;
  line-height: 20px;
}

.verification_btn {
  position: relative;
  left: 280px;
  bottom: 150px;
}

.input_verification {
  width: 200px;
}
h2 {
  text-align: center;
}
.main {
  padding: 0px;
  margin: 0px;
}

.login_btn {
  margin: 30px 60px 0px 126px;
}

.body_back {
  height: 1000px;
}
.body_back img {
  width: 100%;
  min-width: 200px;
  height: 100%;
}
.login_demo {
  border-radius: 17px;
  background: rgb(46, 47, 48, 0.7);
  width: 500px;
  min-width: 500px;
  height: 500px;
  margin: 0 auto;
  position: absolute;
  top: 200px;
  left: 35%;
  color: black;
}
.input_username {
  width: 350px;
}
.input_password {
  width: 350px;
}
</style>